<template>
  <div class="awearItem-box">
    <div class="title-box">
      <img
        class="img"
        style="height: 40px; width: 40px; border-radius: 20px"
        :src="item.avatar"
      />
      <div class="name">{{ item.expertName }}</div>
      <div class="time">{{ item.createTime }}</div>
    </div>
    <main class="comment-content">
      <div
        v-for="(contentItem, contentIndex) in item.content"
        :key="contentIndex"
      >
        {{ contentItem.answer }}
        <div
          v-if="contentItem.law && contentItem.law.length != 0"
          class="law-box"
        >
          <div v-for="(lawItem, lawIndex) in contentItem.law" :key="lawIndex">
            <div class="law-tile">
              {{ lawItem.title }}
            </div>
            <div class="law-content">
              {{ lawItem.content.join() }}
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.awearItem-box {
  .title-box {
    display: flex;
    align-items: center;
    .name {
      font-size: 20px;
      font-weight: 800;
      margin: 0px 20px;
    }
    margin-bottom: 30px;
  }
  .comment-content {
    margin-bottom: 30px;
  }

  .law-box {
    // font-weight: 800;
    color: #868fa3;
    background-color: #f6f7fa;
    padding: 20px;
    .law-tile {
    }

    .law-tile::after {
      display: block;
      content: "";
      margin: 10px 0px;
      height: 2px;
      background-color: #f1f3f4;
    }
    .law-content {
      padding: 0px;
      height: 38px;
      line-height: 38px;
    }
  }
}
</style>